<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="工厂:" prop="plantNo">
          <el-select v-model="formModel.plantNo" :disabled="disabledPlant" @change="changePlant" clearable filterable>
            <el-option v-for="item in plantOptions" :key="item.tmBasPlantId" :label="item.plantNo + '-' + item.plantNameC" :value="item.plantNo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="no-warn-item" label="上线产线:" prop="lineNo">
          <el-select v-model="formModel.lineNo" @change="changeLine" clearable filterable>
            <el-option v-for="item in lineOptions" :key="item.tmBasLineId" :label="item.lineNo + '-' + item.lineNameC" :value="item.lineNo"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item class="no-warn-item" label="订单编号:" prop="orderId">
          <el-input
            v-model="formModel.orderId"
            class="filter-item "
            clearable
          />
        </el-form-item>
        <el-form-item class="no-warn-item" label="整车物料号:" prop="materialNo">
          <el-input v-model="formModel.materialNo" disabled>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="queryMaterialData"></el-button>
          </el-input>
        </el-form-item>
        <el-form-item class="no-warn-item" label="订单状态:" prop="orderStatus">
          <hey-select v-model="formModel.orderStatus" disabled clcd="order_status_cd" />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" v-if="hasPermission('order_sort_select')" plain @click="queryList">查询</el-button>
            <el-button type="primary" v-if="hasPermission('order_sort_clear')" plain @click="clearCondition">清除</el-button>
            <el-button type="primary" v-if="hasPermission('order_sort_top')" plain @click="handleTop">置顶</el-button>
            <el-button type="primary" v-if="hasPermission('order_sort_up')" plain @click="handleUp">上移</el-button>
            <el-button type="primary" v-if="hasPermission('order_sort_down')" plain @click="handleDown">下移</el-button>
            <el-button type="primary" v-if="hasPermission('order_sort_release')" plain @click="handRelease">订单释放</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <hey-table ref="table" :table-data="tableData" @selection-change="handleSelectionChange" @row-click="handleRowClick" :hasPagination="false" :is-together-choose="false" :is-select="true" :columns="columns">

    </hey-table>
    <el-dialog
      v-dialogDrag
      v-if="showMaterialData"
      :close-on-click-modal="false"
      title="物料主数据"
      :visible.sync="showMaterialData"
      width="90%"
      append-to-body
    >
      <material-data-dialog :edit-data="editData" @queryMaterialDataSuc="queryMaterialDataSuc" />
    </el-dialog>
  </div>
</template>

<script>

  export default {
    name: 'OrderSortlist',
    components: {
      MaterialDataDialog: () => import('@/views/dialog/material-data-dialog'),
    },
    props: {},
    data() {
      return {
        showMaterialData: false,
        disabledPlant:false,
        tableData:[],
        operType: '',
        editData: {},
        chooseData: {},
        plantOptions:[],
        lineOptions:[],
        allLineshop:[],
        sortNumList:[],
        formModel: {
          plantNo: '',
          lineNo: '',
          orderId: '',
          materialNo: '',
          orderStatus: '02',
          isDelete: '0'
        },
        columns: [
          { title: '计划编号', key: 'planNo'},
          { title: '订单编号', key: 'orderId'},
          { title: '车辆VIN号', key: 'vin'},
          { title: '订单状态', key: 'orderStatus',clcd:'order_status_cd'},
          { title: '工厂代码', key: 'plantNo'},
          { title: '工厂名称', key: 'plantNameC'},
          { title: '整车物料号', key: 'materialNo'},
          { title: '物料描述', key: 'materialDesc'},
          { title: '车型', key: 'productTypeKey',clcd:'key_product_type'},
          { title: '生产类型', key: 'proType',clcd:'Key_Product_Type'},
          { title: '销售类型', key: 'saleType',clcd:'Key_Sale_Type'},
          { title: '需求类型', key: 'needType',clcd:'need_type_cd'},
          { title: 'VIN年份', key: 'vinYear',clcd:'Key_Vin_ModeYear'},
          { title: '预分配经销商编号', key: 'dealerCode'},
          { title: '计划上线日期', key: 'planStartDate'},
          { title: '计划下线日期', key: 'planEndDate'},
          { title: '实际上线日期', key: 'practicalStartDate'},
          { title: '实际下线日期', key: 'practicalEndDate'},
          { title: '工艺路线代码', key: 'routeNo'},
          { title: '工艺路线名称', key: 'routeName'},
          { title: '上线产线代码', key: 'lineNo'},
          { title: '上线产线名称', key: 'lineNameC'},
          { title: '上线序列号', key: 'sortNum'},
          { title: '创建时间', key: 'createTime' },
          { title: '创建人', key: 'createUsername' },
          { title: '更新次数', key: 'updateNum'},
          { title: '最后修改时间', key: 'lastUpdateTime'},
          { title: '最后修改人', key: 'lastUpdateUsername' },
        ],
      }
    },
    computed: {

    },
    mounted() {
      this.getPlants()
      this.getLines()
    },
    methods: {
      getLines(){
        const param = {pageNum:1,pageSize:9999}
        param.isDelete = '0'
        param.status = '1'
        this.get('/tmBasLine/queryTmBasLine', param).then(res => {
          this.allLineshop = res.list
          this.lineOptions = this.allLineshop
        })
      },
      changeLine(value){
        if(value){
          this.disabledPlant = true
          const lineObj = this.lineOptions.find(item => item.lineNo === value)
          const plantObj = this.plantOptions.find(item => item.tmBasPlantId === lineObj.tmBasPlantId)
          this.formModel.plantNo = plantObj.plantNo
        }else{
          this.disabledPlant=false
          this.formModel.plantNo = ''
          this.lineOptions = this.allLineshop
        }
      },
      changePlant(value){
        if(value){
          const param = {pageNum:1,pageSize:9999}
          param.isDelete = '0'
          param.status = '1'
          const obj = this.plantOptions.find(item => item.plantNo === value)
          param.tmBasPlantId = obj.tmBasPlantId
          this.get('/tmBasLine/queryTmBasLine', param).then(res => {
            this.lineOptions = []
            this.lineOptions = res.list
          })
        }else{
          this.lineOptions = []
          this.lineOptions = this.allLineshop
        }
      },
      clearCondition(){
        this.resetObj(this.formModel)
        this.formModel.isDelete = '0'
      },
      queryMaterialData(){
        this.editData.materialTypeKey = 'car'
        this.showMaterialData = true
      },
      queryMaterialDataSuc(data){
        this.formModel.materialNo = data.materialNo
      },
      handleRowClick(row) {
        if (row) {
          this.chooseData = row
        } else {
          //清空选中数据
          this.chooseData = {}
        }
      },
      handleTop() {
        if(Object.keys(this.chooseData).length==0){
          this.$warn('请单击选中一条数据!')
          return false
        }
        //选中数据的index
        const index = this.tableData.findIndex((item)=>item==this.chooseData)
        if(0 == index){
          this.$warn('该数据已是置顶数据,不能进行该操作!')
          return false
        }
        //将当前选中的数据从列表中删除
        this.tableData.splice(index,1)
        //删除后的列表
        const arr = [...this.tableData]
        //清空列表
        this.tableData.splice(0,this.tableData.length)
        //将选中数据置顶
        this.tableData.push(this.chooseData)
        this.tableData.splice(1,this.tableData.length,...arr)
      },
      handleUp() {
        if(Object.keys(this.chooseData).length==0){
          this.$warn('请单击选中一条数据!')
          return false
        }
        //选中数据的index
        const index = this.tableData.findIndex((item)=>item==this.chooseData)
        if(0 == index){
          this.$warn('该数据已是置顶数据,不能进行该操作!')
          return false
        }
        //选中数据的上一条数据
        const previous = this.tableData[index-1]
        this.$set(this.tableData, index-1, this.chooseData)
        this.$set(this.tableData, index, previous)
      },
      handleDown() {
        if(Object.keys(this.chooseData).length==0){
          this.$warn('请单击选中一条数据!')
          return false
        }
        //选中数据的index
        const index = this.tableData.findIndex((item)=>item==this.chooseData)
        if(this.tableData.length-1 == index){
          this.$warn('该数据已是置底数据,不能进行该操作!')
          return false
        }
        //选中数据的下一条数据
        const next = this.tableData[index+1]
        this.$set(this.tableData, index+1, this.chooseData)
        this.$set(this.tableData, index, next)
      },
      handRelease(){
        if(!this.sortNumList || this.sortNumList.length == 0){
          this.$warn('请至少选中一条需要排序的订单!')
          return false
        }
        const param = {}
        param.sortNumList = this.sortNumList
        for(let i=0;i<param.sortNumList.length;i++){
          if(this.sortNumList[i].planStartDate){
            param.sortNumList[i].planStartDate = new Date(this.sortNumList[i].planStartDate.replace(/-/g,"/"))
          }
          if(this.sortNumList[i].planEndDate){
            param.sortNumList[i].planEndDate = new Date(this.sortNumList[i].planEndDate.replace(/-/g,"/"))
          }
          param.sortNumList[i].createTime = ''
          param.sortNumList[i].lastUpdateTime = ''
        }
        const url = '/tmOfmOrder/orderRelease'
        const tip = '订单释放成功!'
        this.post(url, param).then(res => {
          this.$info(tip, () => {
            this.queryList()
          })
        })
      },
      handleSelectionChange(data){
        this.sortNumList = data
      },
      getPlants(){
        const param = {pageNum:1,pageSize:9999}
        param.isDelete = '0'
        param.status = '1'
        this.get('/tmBasPlant/queryTmBasPlant', param).then(res => {
          this.plantOptions = res.list
        })
      },
      queryList() {
        this.chooseData = {}
        this.$refs.table.query('/tmOfmOrder/queryTmOfmOrderList', this.formModel, '', false)
      },
    }
  }
</script>

<style lang="scss" >

</style>





